import { Input, InputProps } from "@nutui/nutui-react-taro";
import { Text, View } from "@tarojs/components";
import { CSSProperties, ReactNode, useState } from "react";
import styles from "./style.scss";
import { Eye, Marshalling } from "@nutui/icons-react-taro";

type Props = {
  pre?: ReactNode;
  end?: ReactNode;
  className?: string;
  style?: CSSProperties;
};

export default (props: Partial<InputProps> & Props) => {
  const { pre, end, className = "", style } = props;
  const [flag, setFlag] = useState(false);
  return (
    <View style={style} className={`${styles.container} ${className}`}>
      {pre && <Text className={styles.text}>{pre}</Text>}
      <Input
        className={styles.input}
        maxLength={50}
        type={flag ? "text" : "password"}
        {...props}
        style={{
          borderBottom:
            pre || end ? "1px solid rgba(0, 0, 0, 0.10)" : undefined,
        }}
      />
      <View onClick={()=>{setFlag(!flag)}}>{flag ? <Eye /> : <Marshalling />}</View>
      {end && <Text className={styles.text}>{end}</Text>}
    </View>
  );
};
